<template>
    <div>
        <h1>会员列表</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <th>会员ID</th>
                    <th>会员名称</th>
                    <th>会员图片</th>
                    <th>会员类型</th>
                    <th>会员数量</th>
                    <th>会员描述</th>
                </tr>
                <tr v-for="item in data.list">
                 <td>{{ item.id }}</td>
                    <td>{{ item.huiYuanName }}</td>
                    <td><img :src="item.photo" alt="" width="60px" height="60px"></td>
                    <td>{{ item.huiYuanTypeName }}</td>
                    <td>{{ item.num }}</td>
                    <td>{{ item.huiYuanText }}</td>
                    <td>
                       
                        <input type="button" value="修改" @click="xiugai(item.id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <!-- 显示 -->
        
    <span
        >共<b>{{ data.totalCount }}</b
        >条</span
      >
      <span
        >每页<b>{{ info.pageSize }}</b
        >条</span
      >
      <span
        >共<b>{{ info.pageIndex }}/{{ data.totalPage }}</b
        >页</span
      >
     
      <input type="button" value="首页" @click="goPage(1)" />
      <input type="button" value="上一页" @click="goPage(info.pageIndex - 1)" />
      <span v-for="item in data.totalPage" @click="goPage(item)">{{
        item
      }}</span>
            <span v-for="item in data.totalPage" @click="goPage(item)"></span>
      <input type="button" value="下一页" @click="goPage(info.pageIndex + 1)" />
      <input type="button" value="尾页" @click="goPage(data.totalPage)" />
      <input type="number" v-model="info.pageIndex" />
      <input type="button" value="跳转" @click="goPage(info.pageIndex)" />
   
      <select v-model="info.pageSize" @change="show">
        <option :value="item" v-for="item in arr">每页{{ item }}条</option>
      </select>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
let info: any = reactive({
   
   
    pageIndex: 1,
    pageSize: 2,
})
let data: any = reactive({
    list: [],
    totalCount: 0,
    totalPage: 0, 
})
let arr = [2, 5, 10, 20];
let ids:any = ref([]);
onMounted(() => {
    getlist(); 
})
const goPage = (num: any) => {
    
    if (num < 1) {
       info.pageIndex = 1;
       return;

    }
    if(num>data.totalPage){
        info.pageIndex=data.totalPage;
        return  ; 
    }
    info.pageIndex = num;
    getlist();
    return;
}
const show = () => {
    info.pageIndex = 1;
    getlist();
}
const getlist = () => {
    axios({
        url: '/api/HuiYuan/huiyuan',
        method: 'get',
        params:info
    }) 
  .then((res)=>{
     data.list = res.data.list;
     data.totalCount = res.data.totalCount;
     data.totalPage = res.data.totalPage;
     console.log(data.list);

   }) 
 .catch((err)=>{
       console.log(err);
   })
}
const xiugai=(id:any)=>{
    router.push({path:'/xiugai',query:{id:id}}) 
}
</script>

<style scoped>

</style>    